<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ note.title }}</title>
    <meta name="author" content="{{ note.author }}">
    <link href="/assets/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/assets/css/diffview.css"/>
    <style type="text/css">
      body {
      padding-top: 60px;
      padding-bottom: 40px;
      }
    </style>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
    tex2jax: {
	inlineMath: [ ['$','$'], ["\\(","\\)"] ],
	processEscapes: true
    }
});

    </script>
    <script type="text/javascript"
	    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script type="text/javascript" src="/assets/js/diff/diffview.js"></script>
    <script src="/assets/js/diff/jsdiff.js"></script>
    <script src="/assets/js/diff/difflib.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js">
    </script>
    <script type="text/javascript">
    var creole;
    var orig_pars = new Array(); //Holds unchanged text for diff and cancel
    $(document).ready(function() {
	{% for par in note.paragraph_set.all %}
	$("#form_{{ par.id }}").ajaxForm();
	orig_pars[{{par.id}}] =  $("#form_"+{{ par.id }}).find("textarea").val();
	{% endfor %}
	// TODO initialise using ajax and on demand
	creole = new Parse.Simple.Creole( {
	    forIE: document.all,
	    interwiki: {
		WikiCreole: 'http://www.wikicreole.org/wiki/',
		Wikipedia: 'http://en.wikipedia.org/wiki/'
	    },
	    linkFormat: ''
	} );
	$('.tabbable').on('shown', '.link_edit', function(e) {
	    var par_id = GetParId(e.target);
	    $("#form_"+par_id).find("textarea,:text").each(function(i, e) {
		UpdatePreview(e)});
	});
	$('.tabbable').on('shown', '.link_compare', function(e) {
	    var par_id = GetParId(e.target);
            if (par_id != "add")
               Compare(par_id);
	});
	$('#main').bind('keyup paste change', function(e) {
	    UpdatePreview(e.srcElement);
	});
	$('.link_view').data("content", "View the paragraph in its current form.");
	$('.link_edit').data("content", "Make the paragraph better by editing it.");
	$('.link_compare').data("content", "See the changes you've just made, commit or undo them.");
	$('.btn_reset').data("content", "Undo your changes and restore original text.");
	$('.btn_commit').data("content", "Save your changes for the others to see.");
	$('.link_view,.link_edit,.link_compare,.btn_reset,.btn_commit').data("title", "What's that?");
	$('.link_view,.link_edit,.link_compare,.btn_reset,.btn_commit').popover();
    });

// Gets NOT a jquery object
function UpdatePreview(trigger) {
    var par_id = GetParId(trigger);
    if (trigger.name=="text") {
	var target = document.getElementById("preview_"+par_id);
	target.innerHTML="&nbsp";
	creole.parse(target, trigger.value);
	MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview_"+par_id]);
    } else if (trigger.name=="title") {
	$("#title_"+par_id).html("<h3>"+trigger.value+"&nbsp<h3>");
    }
}

function ResetEdit(par_id) {
    if (par_id=="add") {
	$("#form_"+par_id).find("textarea").val("");
    } else {
	$("#form_"+par_id).find("textarea").val(orig_pars[par_id]);
    }
    // TODO(kazeevn) reset title as well
    //    $("#form_"+par_id).find("text[name=title]").val(orig_pars[par_id]);
    $("#tabbable_"+par_id).find(".tab-pane,li").removeClass("active");
    $("#tabbable_"+par_id).find(".link_edit").addClass("active in");
    $("#edit_"+par_id).addClass("active");
    $("#form_"+par_id).find("textarea,:text").each(function(i, e) {
	UpdatePreview(e)});
}

function GetParId(element) {
    return $(element).parents("[data-par-id]").data("par-id");
}

function  Preview(par_id)
{
    var options = {
	target: "#preview_"+par_id,
	url: "{% url notes.views.preview %}",
	success: function() {
            MathJax.Hub.Queue(["Typeset",MathJax.Hub,"preview_"+par_id]);
	}};
    $("#form_"+par_id).ajaxSubmit(options);

};
function ToogleImage(par_id)
{
    $("#image_"+par_id).attr("src", document.location+par_id+"/image");
};

function Compare(par_id)
{
    var base = difflib.stringAsLines(orig_pars[par_id]);
    var newtxt = difflib.stringAsLines($("#form_"+par_id).find("textarea").val());
    var sm = new difflib.SequenceMatcher(base, newtxt);
    var opcodes = sm.get_opcodes();
    var diffoutputdiv = document.getElementById("compare_"+par_id);
    while (diffoutputdiv.firstChild) diffoutputdiv.removeChild(diffoutputdiv.firstChild);
    var contextSize = 3;
    contextSize = contextSize ? contextSize : null;
    diffoutputdiv.appendChild(diffview.buildView({ baseTextLines:base,
						   newTextLines:newtxt,
						   opcodes:opcodes,
						   baseTextName:"Was",
						   newTextName:"After your edit",
						   contextSize:contextSize,
						   viewType: 0}));


};


function AddParServer ()
{
    var options = {
	  target: "#preview_add",
      success: function () { location.reload(); },
        error: unauthorized,
        type: "POST"
	  };
    $("#form_add").ajaxSubmit(options);
}

function Commit(par_id)
{
   var options = {
	  target: "#view_"+par_id,
          error: unauthorized,
          type: "POST",
	  success: function () {
	     	  MathJax.Hub.Queue(["Typeset",MathJax.Hub,"view_"+par_id]);
	  }
	  };
  $("#form_"+par_id).ajaxSubmit(options);


	  orig_pars[par_id]= $("#form_"+par_id).find("textarea[name=text]").val();

	  $("#tabbable_"+par_id).find(".tab-pane,li").removeClass("active");
	  $("#view_"+par_id).addClass("active");
	  $("#tabbable_"+par_id).find(".link_view").addClass("active in");
};

function unauthorized (response) {
  newAlert(response.responseText);
}

function newAlert (message) {
    $("#alert-place").append($(
	"<div class='alert " + 'alert-error' +
	    " fade in' data-alert><button class='close' data-dismiss='alert'>×</button>"
	    +message+"</div>"));
}

function AddPar() {
    $("#add").css('display', 'inline')
};

    </script>
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
	<div class="container">
	  <ul class='nav'>
	    <li>
	      <a class="brand" href="http://code.google.com/p/botan/"> Brain Overflow</a>
	    </li>
	    <li>
	      {% load url from future %}
	      <a href="{% url 'social:begin' 'google' %}?next={{ request.path }}">Login</a>
	    </li>
	    <li>
	      <ul class="breadcrumb">
		<li><a href = "/notes/">Notes</a><span class="divider">/</span></li>
		<li>
		  <a href = "/notes/{{ note.id }}">{{ note.title }}</a>
		  <span class="divider">/</span>
		</li>
	    </li>
	    </ul>
	</div>
      </div>
    </div>


    <div class="container" id="main">
      <div class="row">
	<div align="center" class="span12">
	  <h1>{{ note.title }}</h1>
	</div>
      </div>
      <div id="alert-place"></div>
      {% for paragraph in note.paragraph_set.all %}
      <div class="row" data-par-id="{{ paragraph.id }}">
	<div class="row">
	  <h3>{{ paragraph.title }}</h3>
	  <div class="tabbable" id="tabbable_{{ paragraph.id}}">
	    <ul class="nav nav-tabs" data-par-id="{{ paragraph.id }}">
	      <li class="active link_view"><a href="#view_{{ paragraph.id }}"
					      data-toggle="tab">View</a></li>
	      <li class="link_edit"><a class="link_edit",
				       href="#edit_{{ paragraph.id }}" data-toggle="tab">Edit</a></li>
	      <li><a class="link_compare",
		     href="#tab_compare_{{ paragraph.id }}" data-toggle="tab">Compare & Commit || Reset</a></li>
	    </ul>
	    <div class="tab-content">
	      <div class="tab-pane active" id="view_{{ paragraph.id }}">
		{{ paragraph.rendered|safe }}
		<img id="image_{{ paragraph.id }}" src="" width="940px">
	      </div>
	      <div class="tab-pane" id="edit_{{ paragraph.id }}">
		<form id="form_{{ paragraph.id }}" class="form-horizontal span12"
		      action="/notes/{{ note.id }}/{{ paragraph.id }}/commit/" method="post">
		  {% csrf_token %}
		  <div class="row">
		    <div class="span6" id="title_{{ paragraph.id }}">&nbsp</div>
		    <input class="span6" type="text" name="title" value="{{ paragraph.title }}">
		  </div>
		  <div class="row">
		    <div class="span6" id="preview_{{ paragraph.id }}">&nbsp</div>
   		    <textarea class="span6" name="text">{{ paragraph.text }}</textarea>
		  </div>
		  {{ add_form.captcha_ }}
		</form>
	      </div>
	      <div class="tab-pane" id="tab_compare_{{ paragraph.id }}">
		<div class="row well form-inline span12">
		  <button class="btn btn_reset" onclick="ResetEdit('{{ paragraph.id }}')">
		    Reset edit</button>
		  <button class="btn btn_commit" onclick="Commit('{{ paragraph.id }}')">Commit</button>
		</div>
		<div class="row span12" id="compare_{{ paragraph.id }}"></div>
	      </div>
	    </div>
	  </div>
	</div>
      </div>
      {% endfor %}
      <div class="row" data-par-id="add">
	<div class="row">
	  <h3>Add New</h3>
	  <div class="tabbable" id="tabbable_add">
	    <ul class="nav nav-tabs" data-par-id="add">
	      <li class="active link_edit"><a class="link_edit",
					      href="#edit_add" data-toggle="tab">Edit</a></li>
	      <li><a class="link_compare",
		     href="#tab_compare_add" data-toggle="tab">Commit || Reset</a></li>
	    </ul>
	    <div class="tab-content">
	      <div class="tab-pane active" id="edit_add">
		<form id="form_add" class="form-horizontal span12"
		      action="/notes/{{ note.id }}/add/" method="post">
		  {% csrf_token %}
		  <div class="row">
		    <div class="span6" id="title_add">&nbsp</div>
		    <input class="span6" type="text" name="title" placeholder="Title">
		  </div>
		  <div class="row">
		    <div class="span6" id="preview_add">&nbsp</div>
   		    <textarea class="span6" name="text" placeholder="Body"></textarea>
		  </div>
		</form>
	      </div>
	      <div class="tab-pane" id="tab_compare_add">
		<div class="row well form-inline">
		  <button class="btn btn_reset" onclick="ResetEdit('add')">Reset edit</button>
		  <button class="btn btn_commit" onclick="AddParServer()">Commit</button>
		</div>
	      </div>
	    </div>
	  </div>
	</div>
      </div>

      <footer>
	<p>&copy; {{ note.author}}</p>
      </footer>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.3/bootstrap.min.js"></script>
    <script src="/assets/js/jquery.autogrow-textarea.js"></script>
    <script type='text/javascript'>
      $(function() {$('textarea').autogrow();});
    </script>
    <script src="/assets/js/creole.js"></script>
  </body>
</html>
